<template>
	<view>
		<view class="lb-main-32">
			<!-- 取货地址 -->
			<view class="lb-main-box" style="position: relative;border-radius: 16rpx 16rpx 0 0 ;">
				<view class="foot">
					<image src="/static/icon/foot.png" mode=""></image>
				</view>
				<view class="addr-item" @click="goTo('/pages/users/my-address/my-address?type=1')">
					<view class="addr-info" v-if="addrObj">
						<view class="addr-top">
							<text>{{addrObj.contact || ''}}</text>
							<text>{{addrObj.mobile || ''}}</text>
						</view>
						<view class="addr-foot">
							{{addrObj.district || ''}}{{addrObj.address || ''}}
						</view>
					</view>
					<view class="addr-info" v-else>
						请选择地址
					</view>
					<view class="addr-icon">
						<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<u-empty v-if="FormData.length < 1" mode="car" text="衣娄为空" icon="/static/empty/car.png">
			</u-empty>
			<view class="lb-main-box" style="position: relative;" v-for="(item,index) in FormData" :key="index">
				<view class="lb-title">
					<view class="text">
						{{item.name}}
					</view>
					<view class="icon" @click="delCar(index,item)">
						<image src="/static/icon/del.png" mode=""></image>
					</view>
				</view>
				<view class="lb-line">

				</view>
				<view class="lb-list">
					<view class="lb-item" v-for="(t,i) in item.info" :key="i">
						<u-line v-if="i > 0" margin="12rpx 0" dashed></u-line>
						<view class="d-title">
							第{{ i+1 }}件
						</view>
						<view class="img">
							<view class="img-list">
								<view class="imgs" v-for="(v,k) in imgArr[index][i]" :key="k">
									<view class="close" @click="delImages(k,i,index)">
										<image src="/static/icon/close.png" mode=""></image>
									</view>
									<image :src="v" @click="lookImages(k,imgArr[index][i])" mode="">
									</image>
								</view>
							</view>
							<view class="img-up" @tap="uploadImage(1,i,index)">
								<image src="/static/icon/up-btn.png" mode=""></image>
							</view>
						</view>
						<view class="pick" v-if="item.serve" @tap="isChose(t.is_chose,i,index,item.serve)">
							<image v-if="t.is_chose == 1" src="/static/icon/pick-yes.png" mode=""></image>
							<image v-else src="/static/icon/pick-no.png" mode=""></image>
							<text>¥{{item.serve.price}} {{item.serve.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view style="height: 170rpx;">

		</view>
		<view class="lb-foot">
      <view>
        <view v-if="CarInfo.is_free_goods > 0">免单活动价：</view>
        <view class="price">
          {{totalPrice}}
        </view>
      </view>
			<view class="btn" @click="formSubmit">
				提交订单
			</view>
		</view>

		<loginPop></loginPop>
	</view>
</template>

<script>
	import {
		uploadFilesApi
	} from "@/api/apis/comm.js"
	import {
		myCarApi,
		delCarApi,
		carSublimtApi,
		getMyAddrApiList
	} from "@/api/apis/wash.js"
	export default {
		data() {
			return {
				listData: [],
				imgArr: [],
				FormData: [],
        CarInfo:[],
				addrObj: '',
				cars_id: ''
			}
		},
		computed: {
			totalPrice() {
        if(this.CarInfo.is_free_goods > 0){
          return parseFloat(this.CarInfo.total_price).toFixed(2)
        }
				let count = 0;
				this.FormData.forEach(item => {
					count += parseFloat(item.price)
					if (item.serve) {
						item.info.forEach(info => {
							if (info.is_chose) {
								count += parseFloat(item.serve.price)
							}
						})
					}
				})
				return count.toFixed(2)
			}
		},
		methods: {

			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			//购物车列表
			getList() {
				let _this = this;
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				myCarApi({
					car_id: this.cars_id
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.listData = res.data.list;
						let arr = [];
						this.listData.forEach((val, key) => {
							// let id = val.id
							let info = [];
							_this.imgArr[key] = []
							val.detail.forEach((v, k) => {
								info.push({
									image: '',
									is_chose: 0
								});
								_this.imgArr[key][k] = []
							})
							if (val.goods) {
								arr.push({
									id: val.id,
									price: val.goods.a_price ? val.goods.a_price : val.goods.price,
									wash_goods_id: val.wash_goods_id,
									name: val.goods.name,
									info: info,
									serve: val.goods.serve
								})
							}
						})
						_this.FormData = arr;
            _this.CarInfo = res.data;
					}
				})
			},
			//查看数组图片
			lookImages(index, data) {
				if (data) {
					uni.previewImage({
						current: index,
						urls: data
					});
				}
			},
			//删除图片
			delImages(index, subKey, key) {
				let _this = this;
				_this.imgArr[key][subKey].splice(index, 1);
				this.$forceUpdate();
			},
			//删除购物车
			delCar(index, item) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '您是否确认删除？',
					success: e => {
						if (e.confirm) {
							delCarApi({
								car_id: item.id
							}).then((res) => {
								if (res.code == 1) {
									_this.$u.toast('删除成功!');
									setTimeout(() => {
										_this.getList();
									}, 1000)
								}
							})
						} else {

						}
					}
				})
			},

			//获取地址
			getAddr() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				getMyAddrApiList().then(res => {
					uni.hideLoading();
					if (res.code) {
						if (res.data) {
							this.addrObj = res.data[0]
						}

					}
				})
			},

			//选择
			isChose(is_chose, subKey, key, service) {
				this.FormData[key].info[subKey].is_chose = is_chose == 1 ? 0 : 1;
				this.FormData[key].info[subKey].serve_id = is_chose == 1 ? '' : service.id;

				this.$forceUpdate();
			},

			//上传图片
			uploadImage(count, subKey, key) {
				let _this = this;
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(album) {
						// console.log(album.tempFilePaths)
						album.tempFilePaths.forEach((item, index) => {
							// console.log(item)
							uni.getImageInfo({
								src: item, //album.tempFilePaths[0],
								success: function(image) {
									// console.log(image)
									uploadFilesApi(image.path).then(res => {
										if (res.code == 1) {
											let fullurl = res.data.fullurl;
											let url = res.data.url;
											// _this.imgArr[key][subKey].push(fullurl)
											_this.imgArr[key][subKey] = [fullurl];
											_this.FormData[key].info[subKey]
												.image = url;
											_this.$forceUpdate();
										}
									});
								}
							});
						})

					}
				});
			},

			//提交
			formSubmit() {

				if (!this.addrObj) {
					this.$u.toast('请选择地址!');
					return;
				} else if (!this.FormData) {
					this.$u.toast('请选择商品!');
					return;
				}

				//判断当定手机号
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				carSublimtApi({
					address_id: this.addrObj.id,
					info: this.FormData,
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.$u.toast('提交成功!');
						let orderId = res.data.order_id;
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/xi-hu/order-payment/order-payment?order_id=' +
									orderId,
							})
						}, 1500)
					}
				})
			}

		},
		onLoad(e) {
			if (e.car_id && e.car_id != undefined && e.car_id != 'undefined') {
				this.cars_id = e.car_id;
			}

			this.getList();
			this.getAddr();
			uni.$on('addrObj', res => {
				// console.log(res)
				this.addrObj = res;
			})
		},
		onUnload() {
			// 移除监听事件
			// console.log(this.subData)
			uni.$off('addrObj');

		},
	}
</script>

<style lang="scss">
	.foot {
		position: absolute;
		width: calc(100% - 0rpx);
		height: 4rpx;
		left: 0;
		bottom: 0;
	}

	// 地址
	.addr-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.addr-info {
			display: flex;
			flex-direction: column;
			font-size: $main-font-28;
			font-weight: bold;
			color: $uni-text-color;

			.addr-top {
				text {
					font-size: $main-font-28;
					font-weight: bold;
					color: $uni-text-color;

					&:nth-of-type(2) {
						font-weight: 400;
						padding-left: 44rpx;
					}
				}
			}

			.addr-foot {
				font-size: $main-font-28;
				font-weight: 400;
				color: $main-font-color-grey6;
			}
		}

		.addr-icon {}
	}

	//标题
	.lb-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.text {
			font-size: $main-font-28;
			font-weight: bold;
			line-height: 40rpx;
			color: $main-font-color;

		}

		.icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	//线条
	.lb-line {
		position: absolute;
		left: 0rpx;
		top: 72rpx;

		width: calc(100% - 2rpx);
		height: 0rpx;
		border: 2rpx solid #CCCCCC;
	}

	//列表
	.lb-list {
		position: relative;
		margin-top: 24rpx;
		padding: 12rpx 0;

		.lb-item {
			.d-title {
				font-size: $main-font-28;
				font-weight: bold;
				color: $main-font-color;
				padding: 24rpx 0;
			}

			.img {
				display: flex;
				// flex-direction: column;
				flex-direction: row;
				flex-wrap: wrap;

				.img-list {
					// width: 100%;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.imgs {
						width: 150rpx;
						height: 150rpx;
						margin: 0 10rpx 10rpx 0;
						box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
						border-radius: 16rpx;

						position: relative;

						.close {
							position: absolute;
							width: 24rpx;
							height: 24rpx;
							top: -12rpx;
							right: -12rpx;
						}

						image {
							border-radius: 16rpx;
						}
					}
				}

				.img-up {
					width: 150rpx;
					height: 150rpx;

					image {
						border-radius: 16rpx;
					}
				}
			}

			.pick {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 24rpx 0;

				image {
					display: block;
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: $main-font-28;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: $main-font-color-grey6;
				}
			}
		}
	}

	.lb-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		// padding-bottom: 30rpx;
		// padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
		// padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		width: 100%;
		height: 166rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -1rpx 0rpx rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx 30rpx;
		box-sizing: border-box;

		.price {
			font-size: $main-font-36;
			font-weight: bold;
			color: #F65D40;

			&::before {
				content: '¥';
				font-size: $main-font-20;
			}
		}

		.btn {
			width: 180rpx;
			height: 80rpx;
			border-radius: 44rpx;
			background: linear-gradient(133deg, #F7583F 0%, #F28F4C 100%);
			line-height: 78rpx;
			text-align: center;

			font-size: $main-font-28;
			font-family: PingFang SC;
			font-weight: 400;
			color: $main-font-color-white;
		}
	}
</style>
